{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '树形插件:example/tree/index', 'jstree插件'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">树状结构插件 jstree</div>
        </header>
        <div class="card-body">
        
          <p>插件使用jstree 3.3.9，官网地址：<a href="http://jstree.com/" target="_blank">http://jstree.com/</a></p>
        
        </div>
      </div>
  </div>
  
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><div class="card-title">类型树视图</div></div>
      <div class="card-body">
        <div id="types-tree"></div>                                
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><div class="card-title">复选框树视图</div></div>
      <div class="card-body">
        <div id="checkbox-tree"></div>                                
      </div>
    </div>
  </div>
  
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><div class="card-title">拖放树视图</div></div>
      <div class="card-body">
        <div id="drag-drop-tree"></div>                                
      </div>
    </div>
  </div>
  
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><div class="card-title">Ajax树视图</div></div>
      <div class="card-body">
        <div id="ajax-tree"></div>                                
      </div>
    </div>
  </div>

</div>

<script type="text/javascript">
    $(function () {
        $('#types-tree').jstree({
            'core' : {
                'themes' : {
                    'responsive': false
                },
                'data' : [
                      {
                          "text" : "Project",
                          "state" : {"opened" : true },
                          "icon" : "mdi mdi-folder-outline",
                          "children" : [
                              {
                                "text" : "Assets",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-folder-outline",
                                 "children" : [
                                      { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                      { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                      { 
                                        "text" : "Plugins",                                     
                                        "state" : { "opened" : true },
                                        "icon" : "mdi mdi-folder-outline",  
                                        "children" : [
                                              { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                              { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                          ]
                                      }
                                  ]
                              },
                              {
                                "text" : "Icons",
                                "icon" : "mdi mdi-opacity"
                              },
                              {
                                "text" : "Events",
                                "icon" : "mdi mdi-calendar"
                              },
                              {
                                "text" : "UI Kits",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-package-variant-closed",
                                "children" : [
                                      { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Forms",
                                "icon" : "mdi mdi-file-document"
                              },
                              {
                                "text" : "Charts",
                                "icon" : "mdi mdi-chart-pie"
                              },
                              {
                                "text" : "Pages",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-book-open-variant",
                                "children" : [
                                      { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Tables",
                                "icon" : "mdi mdi-table"
                              },
                          ]
                    },
                    {
                        "text" : "Documents",
                        "state" : { "opened" : true },
                        "icon" : "mdi mdi-folder-outline"
                    }
                  ]
            },
            'plugins' : ['types']
        });    
        /* -- Checkbox Tree -- */
        $('#checkbox-tree').jstree({
            'core' : {
                'themes' : {
                    'responsive': false
                },
                'data' : [
                      {
                          "text" : "Project",
                          "state" : {"opened" : true },
                          "icon" : "mdi mdi-folder-outline",
                          "children" : [
                              {
                                "text" : "Assets",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-folder-outline",
                                 "children" : [
                                      { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                      { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                      { 
                                        "text" : "Plugins",                                     
                                        "state" : { "opened" : true },
                                        "icon" : "mdi mdi-folder-outline",  
                                        "children" : [
                                              { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                              { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                          ]
                                      }
                                  ]
                              },
                              {
                                "text" : "Icons",
                                "icon" : "mdi mdi-opacity"
                              },
                              {
                                "text" : "Events",
                                "icon" : "mdi mdi-calendar"
                              },
                              {
                                "text" : "UI Kits",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-package-variant-closed",
                                "children" : [
                                      { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Forms",
                                "icon" : "mdi mdi-file-document"
                              },
                              {
                                "text" : "Charts",
                                "icon" : "mdi mdi-chart-pie"
                              },
                              {
                                "text" : "Pages",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-book-open-variant",
                                "children" : [
                                      { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Tables",
                                "icon" : "mdi mdi-table"
                              },
                          ]
                    },
                    {
                        "text" : "Documents",
                        "state" : { "opened" : true },
                        "icon" : "mdi mdi-folder-outline"
                    }
                  ]
            },
            'plugins' : ['types', 'checkbox']
        });    
        /* -- Drag & Drop Tree -- */
        $('#drag-drop-tree').jstree({
            'core' : {
                'themes' : {
                    'responsive': false
                },
                'check_callback' : true,
                'data' : [
                      {
                          "text" : "Project",
                          "state" : {"opened" : true },
                          "icon" : "mdi mdi-folder-outline",
                          "children" : [
                              {
                                "text" : "Assets",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-folder-outline",
                                 "children" : [
                                      { "text" : "CSS", "state" : { "opened" : true }, "icon" : "mdi mdi-file-outline" },
                                      { "text" : "JS", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Fonts", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Images", "icon" : "mdi mdi-file-outline" },
                                      { 
                                        "text" : "Plugins",                                     
                                        "state" : { "opened" : true },
                                        "icon" : "mdi mdi-folder-outline",  
                                        "children" : [
                                              { "text" : "jQuery", "icon" : "mdi mdi-file-outline" },
                                              { "text" : "Bootstrap", "state" : { "selected" : true, "opened" : true }, "icon" : "mdi mdi-file-outline" }
                                          ]
                                      }
                                  ]
                              },
                              {
                                "text" : "Icons",
                                "icon" : "mdi mdi-opacity"
                              },
                              {
                                "text" : "Events",
                                "icon" : "mdi mdi-calendar"
                              },
                              {
                                "text" : "UI Kits",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-package-variant-closed",
                                "children" : [
                                      { "text" : "Buttons", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Badges", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Forms",
                                "icon" : "mdi mdi-file-document"
                              },
                              {
                                "text" : "Charts",
                                "icon" : "mdi mdi-chart-pie"
                              },
                              {
                                "text" : "Pages",
                                "state" : { "opened" : true },
                                "icon" : "mdi mdi-book-open-variant",
                                "children" : [
                                      { "text" : "Coming Soon", "icon" : "mdi mdi-file-outline" },
                                      { "text" : "Maintenance", "icon" : "mdi mdi-file-outline" }
                                  ]
                              },
                              {
                                "text" : "Tables",
                                "icon" : "mdi mdi-table"
                              },
                          ]
                    },
                    {
                        "text" : "Documents",
                        "state" : { "opened" : true },
                        "icon" : "mdi mdi-folder-outline"
                    }
                  ]
            },
            'plugins' : ['dnd']
        });    
        /* -- Ajax Tree -- */
        $('#ajax-tree').jstree({
            'core' : {
                'animation' : 0,
                'check_callback' : true,
                'force_text' : true,
                'themes' : {
                    'responsive': false
                },
                'data' : {
                    'url' : function (node) {
                        return node.id === '#' ? "{:url('example/tree/root')}" : "{:url('example/tree/children')}";
                    },
                    'data' : function (node) {
                        return { 'id' : node.id };
                    }
                }
            },
            "types" : {
                'default' : {
                    'icon' : 'mdi mdi-folder-outline'
                },
                'file' : {
                    'icon' : 'mdi mdi-file-outline'
                }
            },
            "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
        });
    })
    </script>